{extend name="./app/admin/view/main.html" /}
{block name="title"}用户组管理 - 用户 -{__block__}{/block}

{block name="style"}
<style>
</style>
{/block}

{block name="main"}

<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">用户</h4> <h5 class="sub-title">用户组管理</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='groupAdd'>
            <span><Icon type="md-add"></Icon> 添加用户组</span>
        </button>
    </div>
</header>
<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="mip-box">
        <section class="mip-box-body">
            <section class="diy-table-list" v-cloak>

                <table class="table table-hover diy-table-list">
                    <thead>
                    <tr class="diy-table-item-header">
                        <th>ID</th>
                        <th>组名称</th>
                        <th>组Code</th>
                        <th>排序</th>
                        <td>操作</td>
                    </tr>
                    </thead>

                    <tbody class="diy-table-body">
                    <template v-if='groupList' v-for='(item,index) in groupList'>
                        <tr class="tr1 diy-table-item">
                            <td>{{item.group_id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.group_code}}</td>
                            <td>

                                <i-Button type="text" size="small" @click='moveUp(item)' :disabled='index==0'>
                                    <Icon type="md-arrow-round-up"></Icon></i-Button>
                                <i-Button type="text" size="small" @click='moveDown(item)' :disabled='groupList.length==index+1'>
                                    <Icon type="md-arrow-round-down"></Icon></i-Button>

                            </td>
                            <td>
                                <Button-Group size="small" shape="circle">
                                    <i-button type="success" @click="groupEdit(index, item)">修改</i-button>
                                    <i-button type="warning" @click="groupDel(index,item)">删除</i-button>
                                </Button-Group>
                            </td>
                        </tr>
                    </template>

                    <template v-if="groupList.length==0">
                        <tr>
                            <td colspan="5" class="no-block">
                                <Icon type="ios-filing-outline"></Icon>
                                <p>暂无数据</p>
                            </td>
                        </tr>
                    </template>
                    </tbody>
                </table>
            </section>
        </section>
    </section>
</main>

<Modal v-model="dialogShow" size="large" v-cloak>
    <i-form :model="group" :rules="dialogRules" ref="group" :label-width="120">
        <div style="height:20px;"></div>
        <Form-Item label="用户组名称" prop="name">
            <i-input v-model="group.name" placeholder="例：普通管理员"></i-input>
        </Form-Item>
        <form-item label="用户组代号">
            <i-input placeholder="唯一代号，开发中使用代号判断用户所在的组" v-model="group.group_code"></i-input>
        </Form-Item>
        <Form-Item label="顺序号" prop="url_name">
            <i-input placeholder="例：50" v-model="group.sort"></i-input>
        </Form-Item>
    </i-form>
    <div slot="footer" class="dialog-footer">

        <i-button type="primary" @click="groupSave()">确 定</i-button>
        <i-button @click="dialogShow = false">取 消</i-button>
    </div>
</Modal>


{/block}

{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            loading: false,
            groupList: [],

            group: {
                group_id: '',
                name: '',
                group_code: '',
                sort: 50,
                status: true,
                save_type: 'new',


            },
            dialogRules:{
                name: [{
                    required: true,
                    message: '请输入用户组名称',
                    trigger: 'blur'
                }],
                group_code: [{
                    required: true,
                    message: '请输入用户组名称',
                    trigger: 'blur'
                }],
            },
            dialogShow: false,


        },
        watch: {
        },
        mounted() {
            this.getGroupList();
        },
        methods: {
            moveUp(item) {
                var groupList = this.groupList;
                for (var i = 0; i < groupList.length; i++) {
                    groupList[i].sort = i;
                    if(groupList[i].group_id==item.group_id){
                        groupList[i-1].sort+=1;
                        groupList[i].sort -= 1;
                    }
                }
                this.groupList = groupList;
                this.groupSortSave();
            },
            moveDown(item) {
                var groupList = this.groupList;
                for (var i = 0; i < groupList.length; i++) {
                    groupList[i].sort = i;
                    if(groupList[i].group_id==item.group_id){
                        groupList[i+1].sort=i;
                        groupList[i].sort += 1;
                        i++;
                    }
                }
                this.groupList = groupList;
                this.groupSortSave();
            },
            groupSortSave() {
                var itemList = [];
                for(var i=0;i<this.groupList.length;i++){
                    var g=this.groupList[i];
                    itemList.push({'group_id':g.group_id,'sort':g.sort});
                }

                this.$mip.ajax('{$mipInfo.domain}/user/ApiAdminUserGroup/groupSortSave', {
                    groupList: itemList,
                }).then(res => {
                    if(res.code == 1) {
                        this.$Message.success('操作成功');
                        this.getGroupList();
                    }
                });
            },
            groupAdd: function(){
                this.group.group_id='';
                this.group.name='';
                this.group.group_code='';
                this.group.sort=50;
                this.group.status=true;
                this.group.save_type='new';

                this.dialogShow=true;
            },
            groupEdit: function(index,item){
                this.group.group_id=item.group_id;
                this.group.name=item.name;
                this.group.group_code=item.group_code;
                this.group.sort=item.sort;
                this.group.status=item.status;
                this.group.save_type='edit';

                this.dialogShow=true;
            },
            groupSave: function(){
                this.$mip.ajax('{$mipInfo.domain}/user/ApiAdminUserGroup/groupSave', this.group )
                    .then(res => {
                    if(res.code == 1) {
                        this.$Message.success('操作成功');
                        this.getGroupList();
                    }
                });
            },
            getGroupList: function() {
                this.$mip.ajax('{$mipInfo.domain}/user/ApiAdminUserGroup/groupList', {
                }).then(res => {
                    if(res.code == 1) {
                        var groupList = res.data;
                        var tempGroupList = [];
                        for (var i = 0; i < groupList.length; i++) {
                            tempGroupList.push(groupList[i]);
                        }
                        this.groupList = tempGroupList;

                    }
                });
            },

        }
    })
</script>
{/block}